import { useState, useEffect } from 'react';
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { FlatList, StyleSheet, Text, View, ImageBackground, } from 'react-native';
import { useAuth } from '../context/AuthProvider';

const DeliveryAddress = ({ navigation }) => {
    const [page, setPage] = useState(1);
    const [list, setList] = useState([]);
    const [refreshing, setRefreshing] = useState(false);
    const { user } = useAuth()

    useEffect(() => {
        fetch('http://10.7.89.174:3000/DeliveryAddress',
            {
                method: 'POST',
                body: JSON.stringify({
                    userName: user.userName
                })
            })
            .then(res => res.json())
            .then(res => {
                setRefreshing(false)
                setList(res.List)
                console.log(list)
            })
        navigation.setOptions({
            headerLeft: () => (
                <View style={{ width: 100 }}>
                    <Text onPress={() => Center()}>
                        <AntDesign
                            name='arrowleft'
                            size={25}
                            color="black"
                        />
                    </Text>
                </View>
            ),
        })
    }, [page])

    const onChange = (addressId) => {
        navigation.navigate('ChangeAddress', { id: addressId })
    }

    const onBtn = (addressId) => {
        fetch('http://10.7.89.174:3000/qiandelAddress',
            {
                method: 'POST',
                body: JSON.stringify({
                    addressId: addressId,
                })
            })
            .then(res => res.json())
            .then(res => {
                alert("删除成功")
                console.log(res.code)
                console.log(res)
            })
    }
    const onEnd = () => {
        setPage(page + 1)
    }
    const onRefresh = () => {
        setRefreshing(true);
        setPage(1);
    }
    const renderItem = ({ item }) => (
        <View key={item.id}>
            <View style={styles.djx1}>
                <Text style={{ marginLeft: "7%", marginTop: "9%" }}>
                    <Entypo
                        name='address'
                        size={40}
                    />
                </Text>
                <View style={{ marginLeft: "23%", marginTop: "-14%" }}>
                    <Text style={{ marginTop: "3%" }}>收货人：{item.addressName}</Text>
                    <Text style={{ marginTop: "-6.5%", marginLeft: "35%" }}>电话号码：{item.phoneNum}</Text>
                    <Text style={{ marginTop: "6%" }}>具体地址：{item.park}园区{item.building}号楼</Text>
                </View>
                <Text style={{ marginLeft: "85%", marginTop: "-16%" }} onPress={() => onChange(item.addressId)}>
                    <AntDesign
                        name='form'
                        size={30}
                    />
                </Text>
                <Text style={{ marginLeft: "85%", marginTop: "4%" }} onPress={() => onBtn(item.addressId)}>
                    <AntDesign
                        name='delete'
                        size={30}
                    />
                </Text>
            </View>
        </View>
    )
    const Center = () => {
        navigation.navigate('Setting')
    }
    const onAddAddress = () => {
        navigation.navigate('AddAddress')
    }

    return (
        <View style={{ flex: 1 }}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <View style={styles.djx2}>
                    <Text style={{ marginLeft: 120, marginTop: 12 }} onPress={() => onAddAddress()}>
                        <AntDesign
                            name='pluscircleo'
                            size={25}
                        />
                    </Text>
                    <Text style={{ marginTop: -23, marginLeft: 160 }} onPress={() => onAddAddress()}>
                        添加收货地址
                    </Text>
                </View>
                <View>
                    <FlatList
                        ListEmptyComponent={<Text>暂无数据</Text>}
                        onRefresh={onRefresh}
                        refreshing={refreshing}
                        data={list}
                        renderItem={renderItem}
                        onEndReached={onEnd}
                        keyExtractor={item => item.id}
                    />
                </View>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    djx1: {
        width: "90%",
        height: 120,
        borderColor: "grey",
        borderWidth: 1,
        marginLeft: "5%",
        marginTop: 20
    },
    djx2: {
        width: "90%",
        height: 50,
        marginLeft: "5%",
        marginTop: 30,
        borderColor: "grey",
        borderWidth: 1,
        backgroundColor: "grey"
    },
    bgimg: {
        flex: 1,
        resizeMode: "cover",
    },
});

export default DeliveryAddress